<template>
    <div class="main">
        <!-- <div id="ContentTop" class="ContentTop">
            <div class="topleft3" @click="backUrl">选择科目</div>
        </div> -->
        <ul class="mainMenu">
            <li v-for="item in subjectList" @click="jumpSubject(item.value)" :data-value="item.value">
                <span><img :src="item.imgSrc" :alt="item.imgSrc" /></span>
                <p>{{ item.text }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
import {getAppID,setStore, removeStore} from "../../config/mUtils";
export default {
    data: function() {
        return {
            subjectList: [{
                    text: '管综',
                    value: 'DZ_KYGZZT',
                    imgSrc: require('images/guanzong.png')
                },
                {
                    text: '经综',
                    value: 'DZ_KYJZZT',
                    imgSrc: require('images/jingzong.png')
                },
                {
                    text: '数学',
                    value: 'DZ_KYSXZT',
                    imgSrc: require('images/shuxue.png')
                },
                {
                    text: '英语',
                    value: 'DZ_KYYYZT',
                    imgSrc: require('images/yingyu.png')
                },
                {
                    text: '政治',
                    value: 'DZ_KYZZZT',
                    imgSrc: require('images/zhengzhi.png')
                }
            ]
        }
    },
    methods: {
        jumpSubject: async function(value) {
            setStore('ExamType', value);
            await getAppID(value).then(res => {
                setStore('AppID', res.data);
            });
            this.$router.push('/problemSet');
        },
        backUrl: function(){
            this.$router.push('/login');
        }
    }
}

</script>

<style lang="less">
.ContentTop {
    position: fixed;
    _position: absolute;
    top: 0;
    left: 0px;
    z-index: 1;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #eee;
    border-bottom: 1px solid #eee;
    .topleft3 {
        float: left;
        width: 100%;
        background: url("../../images/back.png") no-repeat 12px;
        background-size: 10px 20px;
        color: #333;
        text-align: center;
        overflow: hidden;
        font-size: 2rem;
        /*padding-left: 10%;*/
        cursor: pointer;
    }
}
.mainMenu {
    margin: 0;
    padding: 0;
    padding: 20px;
    padding-top: 0;
    padding-top: 40px;
    /*padding-top: 70px;*/
    li {
        text-decoration: none;
        border-radius: 10px;
        list-style: none;
        padding: 20px 0;
        margin-top: 20px;
        box-shadow: 0px 0px 8px #eee;
        text-align: center;
        font-size: 2rem;
        overflow: hidden;
        position: relative;
        span {
            position: absolute;
            left: 50%;
            margin-left: -80px;
            display: inline-block;
            width: 80px;
            img {
                width: 100%;
            }
        }
        p {
            margin: 20px 0px 20px 80px;
            font-size: 2rem;
            color: #000;
            display: inline-block;
        }
    }
}
</style>
